<template>
    <div>
        <h3>
            <slot></slot>
        </h3>
        <div class="box">
            <div class="home" v-for='item in courseList' :key=' item.courseId'>
                <router-link :to="{path:'/particulars',query:{courseid:item.courseId}}" tag="ul">

                    <li style="overflow: hidden"><img :src="item.coverFileUrl" alt=""></li>
                    <li style="color: black">{{item.courseTitle}}</li>
                    <li >共{{item.subSectionNum}}节课|{{item.learningNum}}人报名</li>
                    <li style="color: #42b983" v-if="item.isFree==1">免费</li>
                    <li class="money" v-if="item.isFree==0"><div>￥{{item.discountPrice}}</div>
                        <div v-if="item.isDiscount ==1"><del>{{item.coursePrice}}</del></div>
                    <div class="discountmoney" v-if="item.discountDesc=='限时钜惠'">限时钜惠</div>
                    </li>

                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "courseallhome",
        data() {
            return {
                courseList: [],
            };
        },
        props:{
            typ:{
                type:String,
                default:'free'
            },
            page:{
                type:[Number,String],
                default:5
            }
        },

        created() {
            let form = new URLSearchParams();
            form.append('type', this.typ);
            form.append('pageNum', 1);
            form.append('pageSize', this.page);
            this.$axios.post('http://wkt.myhope365.com/weChat/applet/course/list/type', form).then(res => {
                console.log(res.data.rows);
                this.courseList = res.data.rows;

            })
        }
    }
</script>

<style scoped>
    .box {
        width: 1200px;
        min-width: 1200px;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .home {
        box-sizing: border-box;
        width: 20%;
        height: 200px;
        /* background-color: aqua; */
        padding-right: 10px;
    }

    .home img {
        width: 100%;
        height: 120px;
    }
    .home img:hover{
        transform: scale(1.1);
    }
    h3 {
        margin: 0px 160px 10px;
        border-bottom: 1px solid gainsboro;
        margin-top: 30px;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
    }
    .money {
        overflow: hidden;
    }
    .money div{
        float: left;
    }
    .money div:first-child{
        color: red;
        font-size: 16px;
    }
    .money div:nth-child(2){
        color: #B3B3B3;
        font-size: 16px;
        margin: 0px 50px 0px 10px;
    }
    .money div:nth-child(3){
        width: 64px;
        height: 22px;
        font-size: 10px;
        float: right;
        border: 1px solid orange;
        background-color: #FFF8EA;
        color: orange;
        text-align: center;
        line-height: 22px;
    }


</style>